<template>
    <div v-if="isShow==true">
        <a-card style="margin-bottom: 15px" size="small">
            <template #title>
                <span style="color:#1677ff ;">二次申报项目列表</span>
                <a-tooltip title="返回上级">
                    <a-button style="float: right;" size="middle" @click="goback">
                        <template #icon>
                            <RollbackOutlined />
                        </template>
                    </a-button>
                </a-tooltip>
            </template>

            <!---------- 表格 begin ----------->
            <a-table size="small" :dataSource="tableData" :columns="columns" rowKey="blfunduseid" bordered
                :loading="tableLoading" :pagination="false" :scroll="{ x: 1500}">
                <template #bodyCell="{ text, record, column }">
                    <template v-if="column.dataIndex === 'blapplyprojectname'">
                        <div class="smart-table-operate">
                            <a style="color: #1878ff;" type="link" @click="viewDetail(record)">
                                {{record.blapplyprojectname}}
                            </a>
                        </div>
                    </template>
                    <template v-if="column.dataIndex === 'budgets'">
                        <div class="smart-table-operate">
                            <a style="color: #1878ff;" v-show="record.budgets" @click="goBudgets(record.budgets)">
                                进入年度预算</a>
                            <span type="link" v-show="!record.budgets">暂无年度预算</span>
                        </div>
                    </template>
                    <template v-if="column.dataIndex === 'blapplyprojectapplystatus'">
                        <div class="smart-table-operate">
                            {{record.blapplyprojectapplystatus==7?'审批通过':'审批不通过'}}
                        </div>
                    </template>
                    <template v-if="column.dataIndex === 'apply'">
                        <div class="smart-table-operate">
                            <a type="link" href="#"></a>
                            <a style="color: #1878ff;" v-show="record.applies" @click="goApplies(record.applies)">
                                进入资金使用申请</a>
                            <span type="link" v-show="!record.applies">暂无资金使用申请</span>
                        </div>
                    </template>
                </template>
            </a-table>
        </a-card>
    </div>
    <!-- 年度预算 -->
    <BudgetVue v-else-if="isShow==2" :passParams="fuPassword" @emitPass="changeShow"></BudgetVue>
    <!-- 资金申请 -->
    <ApplyMoney v-else-if="isShow==3" :passParams="fuPassword" @emitPass="changeShow"></ApplyMoney>
    <!-- 二级项目详情 -->
    <ProDetail v-else-if="isShow==false" :passParams="fuPassword" @emitPass="changeShow"></ProDetail>
</template>
<script setup>
    import { nextTick, reactive, ref, defineProps, onMounted, toRefs } from 'vue';
    import { message, Modal } from 'ant-design-vue';
    import BudgetVue from './ChildrenVue/budgetVue.vue';
    import ApplyMoney from './ChildrenVue/ApplyMoney.vue';
    import ProDetail from '../../modules/ProDetail.vue';
    const props = defineProps({
        passParams: {
            type: Object,
        },
    })

    const emits = defineEmits(['emitPass'])
    function goback() {
        emits('emitPass', true)
    }
    // ---------------------------- 表格列 ----------------------------
    const columns = ref([
        {
            title: '项目名称',
            dataIndex: 'blapplyprojectname',
            align: 'center',
            fixed: 'left',
            width: 100,
        },
        {
            title: '项目申报单位',
            dataIndex: 'blapplypeople',
            align: 'center',
        },
        {
            title: '项目联系人',
            dataIndex: 'blprojectcontactpeople',
            align: 'center',
        },
        {
            title: '联系人电话',
            dataIndex: 'blprojectcontactpeoplephone',
            align: 'center',
        },
        {
            title: '项目负责人',
            dataIndex: 'blprojectcontactpeople',
            align: 'center',
        },
        {
            title: '负责人电话',
            dataIndex: 'blprojectmanagepeoplephone',
            align: 'center',
        },
        {
            title: '申报时间',
            dataIndex: 'blapplyprojectapplydate',
            align: 'center',
            sorter: {
                compare: (a, b) => new Date(a.blext1) - new Date(b.blext1),
            },
        },
        {
            title: '年度预算入口',
            dataIndex: 'budgets',
            align: 'center',
        },
        {
            title: '资金使用申请入口',
            dataIndex: 'apply',
            align: 'center',
        },
        {
            title: '是否申报成功',
            dataIndex: 'blapplyprojectapplystatus',
            align: 'center',
        },
        {
            title: '项目申报类型',
            dataIndex: 'blthreetype',
            align: 'center',
        },
        {
            title: '项目申报金额',
            dataIndex: 'blprojectmoney',
            align: 'center',
            sorter: {
                compare: (a, b) => a.blprojectmoney - b.blprojectmoney,
            },
        },
        {
            title: '项目余额',
            dataIndex: 'blprojectothermoney',
            align: 'center',
            sorter: {
                compare: (a, b) => a.blprojectothermoney - b.blprojectothermoney,
            },
        },
    ]);

    // 控制父组件是否展示
    const isShow = ref(true);
    // 改变父组件展示状态
    function changeShow() {
        isShow.value = true;
    }
    const fuPassword = ref({});
    // 进入年度预算
    function goBudgets(data) {
        isShow.value = 2;
        fuPassword.value = data;
    }
    // 进入资金使用申请
    function goApplies(data) {
        isShow.value = 3;
        fuPassword.value = data;
    }
    // 查看详情
    function viewDetail(data) {
        isShow.value = false;
        fuPassword.value = data;
    }
    // 表格加载loading
    const tableLoading = ref(false);
    // 表格数据
    const tableData = ref([]);
    // 总数
    const total = ref(0);
    // 表格赋值
    const dataTable = props.passParams
    const infoValues = dataTable.map(item => {
        const newItem = {
            info: {
                ...item.info
            }
        };
        if (item.children1 && item.children1.budgets) {
            newItem.info.budgets = item.children1.budgets;
        }
        if (item.children1 && item.children1.applies) {
            newItem.info.applies = item.children1.applies;
        }
        return newItem;
    });
    const newData = infoValues.map(item => item.info);

    tableData.value = newData;

</script>

<style lang="less" scoped>
    ::v-deep .ant-card .ant-card-head-title {
        margin: 10px 0px;
        font-size: 16px;
    }
</style>